<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>Demo - SimpleButton</title>
    <link href="../../../css/assets/dpl/base.css" rel="stylesheet"/>
    <link href="../assets/custombutton.css" rel="stylesheet"/>
    <style>
        h1 {
            font-size: 2em;
            margin: 10px;
            text-align: center;
        }

        h2 {
            font-size: 1.5em;
            margin: 10px;
            text-align: center;
        }

        #wrap {
            width: 90%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="wrap">
    <h1 id="describe">simple button demo</h1>

    <h2>显示构造器生成</h2>

    <div id="button_container"></div>
    <label>禁用：<input type="checkbox" id='dis'/></label>


    <h2>初始禁用</h2>

    <div id="button_container2"></div>

    <h2>从已知元素生成</h2>

    <div id="exist" class="ks-button">渐进增强</div>

    <h2>从 json 描述生成</h2>

    <div id="button_container3"></div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script src="/kissy/src/log.js"></script>
<script>

    KISSY.use("node,button,component/manager", function (S, Node, Button, Manager) {
        // view
        // render to container : button_container
        // control
        // view as a parameter
        var b = new Button({
            content: "by new",
            describedby: "describe",
            render: "#button_container"
        });

        b.render();

        b.on("click", function () {
            setTimeout(function () {
                log("by new click");
            }, 0);
        });

        new Button({
            content: 'disabled',
            disabled:true,
            describedby: "describe",
            render: "#button_container2"
        }).render();

        var dis = Node.one("#dis");

        dis.on("click", function () {
            if (dis[0].checked) {
                b.set('disabled', true);
            } else {
                b.set('disabled', false);
            }
        });

        if (dis[0].checked) {
            b.set('disabled', true);
        } else {
            b.set('disabled', false);
        }

        var exist = new Button({
            srcNode: "#exist"
        });
        exist.render();
        exist.on("click", function () {
            log("渐进增强 click");
        });

        Manager.createComponent({
            xclass: 'button',
            content: 'json',
            render: "#button_container3",
            listeners: {
                click: {
                    fn: function () {
                        log('json');
                    }
                }
            }
        }).render();

    });
</script>
</body>
</html>